<template>
	<view >
			<uni-card class="main">
				<view class="main-header">
					<navigator url="./travelBook"><icon-svg icon-class="xiangqing" class="icon deatilIcon"></icon-svg></navigator>
				</view>
				<view class="main-body">
					<view class="icon-cover" v-for="item in icons" @click="handleIcon()" :key="item.name">
							<icon-svg  :icon-class="item.icon" class="icon" :key="item.icon"></icon-svg>
						<view class="icon-text">
							<span>{{item.name}}</span>
						</view>
					</view>
				</view>
			</uni-card>
			<uni-card class="order">
				<view class="tab">
					<wuc-tab :tab-list="tabList" textFlex :tabCur.sync="tabCur" tab-class="tabBasic" select-class="tabSelected"></wuc-tab>
				</view>
			</uni-card>
			<swiper :current="tabCur" class="swiper" duration="300" :circular="false" indicator-color="rgba(0,0,0,0)"
			 indicator-active-color="rgba(0,0,0,0)" @change="swiperChange">
			 <swiper-item v-for="(item,index) in tabList" :key="index">
				 <view class="table">
				 	未匹配到到对应订单，请重新搜索
				 </view>
			 </swiper-item>
			</swiper>
			<uni-popup ref="popup" type="center">
				<uni-popup-message type="warning" message="哦吼…报错了！"></uni-popup-message>
			</uni-popup>
		<zNavigatorBar></zNavigatorBar>
	</view>
</template>

<script>
	import WucTab from '@/components/wuc-tab/wuc-tab.vue';
	import zNavigatorBar from '@/pages/common/navigation';
	import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue';
	export default {
		data() {
			return {
				icons: [{
					icon: 'feiji_',
					name:'机票预定'
				}, {
					icon: 'jiudian1',
					name:'酒店预定'
				}, {
					icon: 'dongche_',
					name:'火车票预定'
				}],
				tabCur: 0,
				current: 0,
				tabList: [{
					name: '全部'
				}, {
					name: '未出行'
				}, {
					name: '已出行'
				}],
			}
		},
		methods:{
			tabChange(index){
				this.tabCur = index;
			},
			swiperChange(e) {
				let {
					current
				} = e.target;
				this.tabCur = current;
			},
			handleIcon() {
				this.$refs.popup.open()
			}
		},
		components: {
			zNavigatorBar,
			uniPopupMessage
		}
	}
</script>

<style lang="scss" scoped>
	.main-header{
		height: 60rpx;
		font-size: 40rpx;
	}
	.main-body {
		font-size: 80rpx;
		height: 400rpx;
	}
	.icon-cover{
		height: 150rpx;
		width:150rpx;
		text-align: center;
		display: inline-block;
	}
	.icon-text{
		text-align: center;
		color:$uni-text-color-grey;
		font-size: 20rpx;
	}
	.deatilIcon{
		margin-right: 10rpx;
		float: right;
	}
	.tabBasic{
		color: $uni-text-color-grey;
		font-size: 30rpx;
	}
	/deep/.tabSelected{
		color: #E14C46;
		border-bottom: none;
	}
	.table{
		text-align: center;
		height: 400rpx;
		color: $uni-text-color-grey;
		line-height: 400rpx;
	}
</style>
